<template>
  <div class="app-container">
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item prop="offlinePayStatus">
              <el-select :placeholder="$t('审核状态')" v-model="queryParams.offlinePayStatus" @change="handleQuery">
                <el-option :label="$t('审核中')" :value="1"></el-option>
                <el-option :label="$t('已确定')" :value="2"></el-option>
                <el-option :label="$t('已取消')" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="distrId">
              <el-select :placeholder="$t('租户')" clearable v-model="queryParams.distrId" @change="handleQuery">
                <el-option v-for="item in distrList" :label="item.name" :value="item.distrId" :key="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item prop="type">
              <el-select :placeholder="$t('账单类型')" clearable v-model="queryParams.type" @change="handleQuery">
                <el-option
                  v-for="item in bill_batch_pay_type_list"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                  :key="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions> </template>
    </PageSearch>

    <el-table :height="calTableHeight()" v-loading="loading" ref="TableRef" :data="tableData" row-key="menuId">
      <!-- 租户 -->
      <el-table-column :label="$t('租户')" align="center" show-overflow-tooltip prop="distrName" />

      <el-table-column align="center" show-overflow-tooltip prop="createTime" :label="$t('创建时间')" />
      <el-table-column align="center" show-overflow-tooltip prop="type" :label="$t('账单类型')">
        <template slot-scope="{ row }">
          <div :style="{ color: $randomColor(row.type) }">{{ handleType(row.type) }}</div>
          <!-- <span :style="{ color: $randomColor(3) }" v-if="scope.row.type == 2">sku提前付</span>
          <span :style="{ color: $randomColor(2) }" v-if="scope.row.type == 3">卖家积分充值</span>
          <span :style="{ color: $randomColor(4) }" v-if="scope.row.type == 4">卖家续费充值</span> -->
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="offlinePayType" :label="$t('支付类型')">
        <template slot-scope="scope">
          <span :style="{ color: $randomColor(0) }" v-if="scope.row.offlinePayType == 1">现金</span>
          <span :style="{ color: $randomColor(3) }" v-if="scope.row.offlinePayType == 2">转账</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="num" :label="$t('账单数量')" />
      <el-table-column align="center" show-overflow-tooltip prop="amount" :label="$t('账单金额（JPY）')">
        <template slot-scope="{ row }">
          <span>{{ row.amount ? (+row.amount).toFixed() : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="handlingFee" :label="$t('银行手续费（JPY）')">
        <template slot-scope="{ row }">
          <span>{{ row.handlingFee ? (+row.handlingFee).toFixed() : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="payAmount" :label="$t('实际金额（JPY）')">
        <template slot-scope="{ row }">
          <span>{{ row.payAmount ? (+row.payAmount).toFixed() : '' }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" show-overflow-tooltip prop="offlinePayStatus" :label="$t('审核状态')">
        <template slot-scope="scope">
          <span :style="{ color: $randomColor(0) }" v-if="scope.row.offlinePayStatus == 1">审核中</span>
          <span :style="{ color: $randomColor(1) }" v-if="scope.row.offlinePayStatus == 2">已确定</span>
          <span :style="{ color: $randomColor(4) }" v-if="scope.row.offlinePayStatus == 3">取消</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="offlinePayVerifyTime"
        :label="$t('审核时间')"
        width="150"
      >
        <template slot-scope="{ row }">
          <div>{{ row.offlinePayVerifyTime }}</div>
          <div style="color: #409eff">{{ row.ip }}</div>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column align="center" fixed="right" width="100" :label="$t('操作')">
        <template slot-scope="{ row }">
          <el-dropdown @command="(command) => handleCommand(command, row)">
            <span class="el-dropdown-link">
              {{ $t('更多') }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-hasPermi="['distribution:billBatchPay:offlinePayInfo']" command="handleDetail">
                {{ $t('详情') }}
              </el-dropdown-item>
              <el-dropdown-item
                v-hasPermi="['distribution:bill:sellerBatchBillOfflinePayConfirm']"
                command="handleConfirm"
                :disabled="row.offlinePayStatus != 1"
              >
                {{ $t('确认支付') }}
              </el-dropdown-item>
              <el-dropdown-item
                v-hasPermi="['distribution:bill:sellerBatchBillOfflinePayCancel']"
                command="cancelConfirm"
                :disabled="row.offlinePayStatus != 1"
              >
                {{ $t('取消') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <Type1 :show.sync="type1.show" :formData="type1.formData" />
    <Type2 :show.sync="type2.show" :formData="type2.formData" />
    <Type3 :show.sync="type3.show" :formData="type3.formData" />
    <Type4 :show.sync="type4.show" :formData="type4.formData" />
    <Type5 :show.sync="type5.show" :formData="type5.formData" />
  </div>
</template>

<script>
import {
  getOfflinePayList,
  sellerBatchBillOfflinePayConfirm,
  sellerBatchBillOfflinePayCancel,
  getDistrList,
} from '@/api/bill/seller'
import { useDict } from '@/utils/useDict'
import Type1 from './components/detail/type1.vue'
import Type2 from './components/detail/type2.vue'
import Type3 from './components/detail/type3.vue'
import Type4 from './components/detail/type4.vue'
import Type5 from './components/detail/type5.vue'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  components: {
    Type1,
    Type2,
    Type3,
    Type4,
    Type5,
  },
  name: 'OfflinePaymentReview',

  data() {
    return {
      type1: {
        show: false,
        formData: {},
      },
      type2: {
        show: false,
        formData: {},
      },
      type3: {
        show: false,
        formData: {},
      },
      type4: {
        show: false,
        formData: {},
      },
      type5: {
        show: false,
        formData: {},
      },
      /**账单批量支付类型 */
      bill_batch_pay_type_list: [],
      distrList: [],
      showSearch: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      tableData: [],
      pageTotal: 0,
    }
  },
  created() {
    this.getList()
    this.getDistrList()
    useDict('bill_batch_pay_type').then(({ bill_batch_pay_type }) => {
      this.bill_batch_pay_type_list = bill_batch_pay_type
    })
  },
  methods: {
    handleCommand(command, row) {
      this[command](row)
    },
    handleDetail(row) {
      this['type' + row.type].formData = { ...row, title: this.handleType(row.type) }
      this['type' + row.type].show = true
    },
    handleType(type) {
      const index = this.bill_batch_pay_type_list.findIndex((i) => i.dictValue == type)
      return this.bill_batch_pay_type_list[index]?.dictLabel
    },
    /**
     * 获取租户
     */
    getDistrList() {
      getDistrList().then((res) => {
        // console.log(`res ==>`, res);
        this.distrList = res.rows
      })
    },
    /**取消支付审核 */
    cancelConfirm(row) {
      this.$modal
        .confirm('是否取消该笔订单的支付审核？')
        .then(function () {
          return sellerBatchBillOfflinePayCancel({ id: row.id })
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('取消成功')
        })
    },
    /**确认支付 */
    handleConfirm(row) {
      const html = `
                    <div style="display:flex;flex-direction:column;align-items: center;font-size:17px;">
                      <div>租户名:<span style="font-weight:bold;">${row.distrName}</span></div>
                      <div>支付:<span style="font-weight:bold;">${row.payAmount}</span>JPY</div>
                      <div>是否确认订单已支付?</div>
                    </div>
                   `
      this.$alert(html, this.$t('提示'), {
        dangerouslyUseHTMLString: true,
      })
        .then(function () {
          return sellerBatchBillOfflinePayConfirm({ id: row.id })
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('支付成功')
        })
    },
    /** 查询菜单列表 */
    getList() {
      getOfflinePayList(this.queryParams).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = ''))
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped></style>
